<template>
    <div class="shop-preview">
        <div class="tip-line">
            <cell-tip tip="编辑修改后请点击下方底部按钮进行保存操作，否则系统不会保存。" />
        </div>

        <div class="preview-head">
            <div class="preview-head__text">店铺首页</div>
        </div>
        <!-- 放置首页样式 -->
        <div class="preview-body">
            <div class="preview-body__img flexs-center">
                <el-image :src="imgBg" fit="cover" />
            </div>
        </div>
        <!-- <div class="preview-foot">
            <div class="copyright">
                <div class="ft-copyright">
                    <img :src="logo_grey" alt="花数云" />
                    <p>花数云提供技术支持</p>
                </div>
            </div>
        </div> -->
    </div>
    <div class="preview-edit">
        <div class="preview-edit__head">
            <div class="preview-edit__head-one flexs">
                <p>优惠券弹窗</p>
            </div>
            <div class="preview-edit__head-dec">当进入小程序首页时，弹出显示优惠券内容; 配置好跳转页面，用户点击即可跳转到对应的页面中。</div>
        </div>
        <div class="preview-edit__body">
            <div class="preview-color__box">
                <div class="preview-color flexs">
                    <p class="preview-color__text">是否开启弹窗</p>
                    <el-switch v-model="switchs" />
                </div>
                <div class="preview-color flexs">
                    <p class="preview-color__text">跳转页面</p>
                    <div>
                        <p class="better-link__text" @click.stop="clickLink">
                            {{ linkItem.urlText || "选择链接页面"
                            }}<el-icon :size="16" v-if="Object.keys(linkItem).length > 0" @click.stop="clearLink">
                                <CircleClose />
                            </el-icon><el-icon>
                                <ArrowDown />
                            </el-icon>
                        </p>
                    </div>
                </div>
                <div class="preview-color">
                    <div class="preview-item__one">
                        <p class="preview-item__left">弹窗图片</p>
                        <div class="preview-item__right">
                            <div class="preview-img" @click.stop="clickImg">
                                <div class="icon-none flexs-center" v-if="imgBg">
                                    <el-image :src="imgBg" fit="cover" v-if="imgBg" />
                                    <span class="preview-img__tip">更换图片</span>
                                </div>
                                <div class="icon-none flexs-center" v-else>
                                    <el-icon color="#4B93FA" size="20px">
                                        <Plus />
                                    </el-icon>
                                    <p class="icon-none__text">添加图片</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 选择页面 -->
    <PageDialog :show="showPage" @change="page_change" @close="showPage = false"></PageDialog>

    <!-- 图片库 -->
    <picture-library :show="showImg" :select_multiple="false" @close="showImg = false" @select="selectImg">
    </picture-library>

    <div class="foot-btn flexs-center">
        <el-button type="primary" size="large" :loading="btn_loading" @click="handleConfirm">保存</el-button>
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted } from "vue"
import { Plus, ArrowDown, CircleClose } from "@element-plus/icons-vue"
import PictureLibrary from "@components/PictureLibrary.vue"
import PageDialog from "@components/PageDialog.vue"
import CellTip from "@components/cell-tip.vue"

const { proxy } = getCurrentInstance()

onMounted(() => {
    getConfigs()
})

function getConfigs() {
    proxy.$axios.get('decorate/popup').then(res => {
        if (res.data.code == 0) {
            let result = res.data.data.style
            switchs.value = result.switchs
            imgBg.value = result.imgBg
            linkItem.value = result.linkItem
        } else {
            proxy.$message({message:res.data.msg,type:"error"})
        }
    }).catch(err => { })
}

/**
 * 保存
 * @param {Boolean} switchs 开关
 */
const switchs = ref(true)
const btn_loading = ref(false)
const handleConfirm = () => {
    if (Object.keys(linkItem.value).length == 0) {
        proxy.$message({ message: "请选择链接页面！", type: "warning" })
        return
    }
    if (imgBg.value == "") {
        proxy.$message({ message: "请上传弹窗图片", type: "warning" })
        return
    }
    let objs = {
        switchs: switchs.value,
        imgBg: imgBg.value,
        linkItem: linkItem.value
    }
    btn_loading.value = true
    proxy.$axios.post('decorate/popup', {
        style: JSON.stringify(objs)
    }).then(res => {
        btn_loading.value = false
        if (res.data.code == 0) {
            proxy.$message({ message: "保存成功！", type: "success" })
        } else {
            proxy.$message({message:res.data.msg,type:"error"})
        }
    }).catch(err => {
        btn_loading.value = false
    })
}

// 选择页面链接
const showPage = ref(false)
const linkItem = ref({})
const page_change = (link) => {
    linkItem.value.urlText = link.urlText
    linkItem.value.url = link.url
    linkItem.value.page_id = link.page_id
    linkItem.value.type = link.type
    showPage.value = false
}
const clickLink = () => {
    showPage.value = true
}
const clearLink = () => {
    linkItem.value = {}
}

/**
 * 添加/更换图片
 * @param {Boolean} showImg 显示图片库
 * @param {String} imgBg 背景图片路径
 * @param {Function} clickImg 点击更换图片，
 * @param {Function} selectImg 选择图片
 */
const showImg = ref(false)
const imgBg = ref("https://saas.huashushop.com/saas/img/coupons.png")
const clickImg = () => {
    showImg.value = true
}
const selectImg = (val) => {
    showImg.value = false
    imgBg.value = proxy.imgUrl + val[0].photo
}
</script>
<script>
export default {
    name: "ShopPopup",
}
</script>

<style lang="less" scoped>
.link-p {
    cursor: pointer;
    font-size: @font-size-md;
    color: @gray-7;

    &:hover {
        color: @themes;
    }
}

.preview-edit__body {
    padding: @padding-md @padding-md @padding-xl;

    .better-link__text {
        color: @themes;
        line-height: @line-height-md;
        display: flex;
        align-items: center;
        cursor: pointer;

        .el-icon {
            margin-left: @margin-base;
        }
    }

    .preview-color__box {
        margin-bottom: @margin-md;

        .preview-color__text {
            color: @gray-7;
        }

        .preview-color {
            margin-bottom: @margin-lg;

            .preview-item__one {
                display: flex;
                font-size: @font-size-md;
                color: @gray-7;
                margin-top: @margin-sm;

                .preview-item__left {
                    flex: none;
                    margin-right: @margin-mdl;
                }

                .preview-item__right {
                    flex: 1;

                    .preview-img {
                        flex: none;
                        margin-right: 10px;
                        position: relative;
                        width: 90px;
                        height: 90px;
                        text-align: center;
                        background-color: @gray-2;
                        border: 1px solid #e5e5e5;
                        cursor: pointer;
                        overflow: hidden;
                        border-radius: @radius-xs;

                        .preview-img__tip {
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            width: 100%;
                            height: 20px;
                            line-height: 20px;
                            font-size: @font-size-sm;
                            color: #fff;
                            background: rgba(0, 0, 0, 0.5);
                            text-align: center;
                        }
                    }

                    .icon-none {
                        flex-direction: column;
                        width: 100%;
                        height: 100%;

                        .icon-none__text {
                            color: @themes;
                            font-size: @font-size-sm;
                            margin-top: @margin-base;
                        }
                    }
                }
            }
        }
    }
}

.tip-line {
    flex: none;
    width: 100%;
}

.shop-preview {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: #fff;
    margin-right: @margin-sm;
    position: relative;
    flex-direction: column;
    height: calc(100vh - 120px);
    padding: @padding-mdl;
}

.preview-head {
    background: url("https://cdn.huashushop.com/tenant_593be52a46f869eea8b31d146d21de7a/album/202304/20230413_65a2bd95cd8296208c97245fb2d2e0a4.png") no-repeat center;
    background-size: cover;
    width: 375px;
    height: 64px;
    box-shadow: 0 2px 8px 0 rgb(0 0 0 / 10%);
    position: relative;

    .preview-head__text {
        width: 180px;
        margin: 0 auto;
        text-align: center;
        padding-top: 31px;
        font-size: 16px;
        font-weight: bold;
    }
}

.preview-body {
    position: relative;
    width: 375px;
    overflow: visible;
    background-color: #f9f9f9;
    box-shadow: 0px 0px 4px 0 rgb(0 0 0 / 10%);
    height: 575px;

    .preview-body__img {
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);

        .el-image {
            width: 240px;
        }
    }
}

.preview-foot {
    min-height: 1px;
    text-align: center;
    line-height: 16px;
    background-color: #f8f8f8;
    width: 375px;
    box-shadow: 0 2px 8px 0 rgb(0 0 0 / 10%);
    overflow: hidden;

    .copyright {
        background-color: #fff;
        position: relative;
        color: #999;
        text-align: center;
    }

    .ft-copyright {
        padding: 20px 16px 10px;
        text-align: center;
        cursor: pointer;
    }

    .ft-copyright img {
        width: 30px;
    }

    .ft-copyright p {
        font-size: 12px;
        color: #bfbfc3;
        padding: 6px 0px 10px;
    }
}

.preview-edit {
    flex: none;
    width: 376px;
    height: calc(100vh - 120px);
    background-color: #fff;
    overflow-y: auto;

    /*滚动条整体样式*/
    &::-webkit-scrollbar {
        /*高宽分别对应横竖滚动条的尺寸*/
        width: 6px;
        height: 1px;
    }

    /*滚动条里面小方块*/
    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: @gray-4;
    }

    /*滚动条里面轨道*/
    &::-webkit-scrollbar-track {
        border-radius: 10px;
        background: #f1f1f1;
    }

    .preview-edit__head {
        border-bottom: 1px solid #f2f4f6;
        padding: @padding-lg @padding-md;

        .preview-edit__head-one {
            font-size: 18px;
            font-weight: bold;
            color: @gray-8;
        }

        .preview-edit__head-dec {
            font-size: @font-size-md;
            color: @gray-6;
            margin-top: @margin-sm;
        }
    }
}</style>

